<template>
  <div>
    <a-table
      bordered
      :dataSource="dataSource"
      :columns="columns"
      v-if="dataSource"
      :scroll="{ x: 900 }"
      :expand-column-width="200"
    />
    <div v-else style="text-align: center; margin-top: 20px">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed, watch, h } from 'vue';
import { getJFBZDiscountApprovaldInfo } from '#/api/core/planAudit';
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const dataSource = ref([]);
const columns = ref([
  {
    title: '优惠比例（%）',
    dataIndex: 'discountRate',
    key: 'discountRate',
    align: 'center',
  },
  {
    title: '优惠金额（元）',
    dataIndex: 'discountAmount',
    key: 'discountAmount',
    align: 'center',
  },
  {
    title: '优惠开始日期',
    dataIndex: 'discountStartDate',
    key: 'discountStartDates',
    align: 'center',
  },
  {
    title: '优惠结束日期',
    dataIndex: 'discountEndDate',
    key: 'discountEndDate',
    align: 'center',
  },
]);
// 存储传递的数据
const storedData = ref({});

const getDetail = async (data) => {
  console.log('data', data);
  let res = await getJFBZDiscountApprovaldInfo(data.id);
  if (res != undefined || res != null || res != '') {
    dataSource.value = res;
  }

  console.log(res);
};

watch(
  () => props.data,
  (newVal) => {
    // 调用发请求的方法
    getDetail(newVal);
    storedData.value = newVal;
  },
  {
    immediate: true,
  },
);
</script>

<style scoped></style>
